#HTML <dialog>

The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

#Attributes

• closedby Experimental : Specifies the types of user actions that can be used to close the <dialog> element. This attribute distinguishes three methods by which a dialog might be closed:

  • A light dismiss user action, in which the <dialog> is closed when the user clicks or taps outside it. This is equivalent to the "light dismiss" behavior of "auto" state popovers.
  • A platform-specific user action, such as pressing the Esc key on desktop platforms, or a "back" or "dismiss" gesture on mobile platforms.
  • A developer-specified mechanism such as a <button> with a click handler that invokes HTMLDialogElement.close() or a <form> submission.

  Possible values are:

  • any: The dialog can be dismissed using any of the three methods.
  • closerequest: The dialog can be dismissed with a platform-specific user action or a developer-specified mechanism.
  • none: The dialog can only be dismissed with a developer-specified mechanism.

  If the <dialog> element does not have a valid closedby value specified, then

  • if it was opened using showModal(), it behaves as if the value was "closerequest"
  • otherwise, it behaves as if the value was "none".

• open: Indicates that the dialog box is active and is available for interaction. If the open attribute is not set, the dialog box will not be visible to the user. It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.

  Note: While you can toggle between the open and closed states of non-modal dialog boxes by toggling the presence of the open attribute, this approach is not recommended. See open for more information.